@using System.Globalization
@using System.Text
@model MileageStats.Web.Models.ChartFormModel
@{
    ViewBag.Title = "Charts";
    Layout = "~/Views/Shared/_Layout.Mobile.cshtml";

    var forMustache = Html.IsRenderingForMustache();
    var vehicleIdQueryStringBuilder = new StringBuilder();
    var vehiclePositionQSBuilder = new StringBuilder();
    
    if (!forMustache)
    {
        var listOfAllVehicleModels = Model.AllVehicleModels.ToList();
        
        for (int i = 0; i < listOfAllVehicleModels.Count; i++)
        {
              if(Model.VehicleIds.Contains(listOfAllVehicleModels[i].VehicleId))
              {
                  vehiclePositionQSBuilder.AppendFormat("&Positions={0}", i);
              }
        }
        
        foreach (int vehicleId in Model.VehicleIds)
        {
            vehicleIdQueryStringBuilder.AppendFormat("&VehicleIds={0}", vehicleId);
        }
    }
}

<nav>
    <ol class="tabs">
        <li><a href="@Url.Action("Index", "Dashboard")">Dashboard</a></li>
        <li><a href="@Url.Action("Index", "Chart")" class="selected">Charts</a></li>
    </ol>
</nav>
@{ Html.RenderPartial("_Flash.Mobile"); }
@using (var section = Mustache.Section("Model"))
{
    
    <div class="view">

        @using (Html.BeginForm("Index", "Chart"))
        {
            <ul>
                <li>
                    <h4>Chart Data</h4>
                    @if (forMustache)
                    {
                        <input type="hidden" id="GetChartImageUrl" value="@Url.UnencodedAction("GetChartImage", "Chart", new {UserId = Mustache.Value(m => m.UserId)})" />
                    }    

                    @Html.DropDownListFor(model => model.ChartName, SelectListFor.Charts())
                                                                             
                </li>
                @if (forMustache)
                {
                    <li><img id="chartimage" style="display:none" /></li>
                }
                else
                {
                    if (vehicleIdQueryStringBuilder.Length > 0)
                    {
                    <li><img src="@Url.Action("GetChartImage", new { UserId = Model.UserId, ChartName = Model.ChartName, StartDate = Model.StartDate, EndDate = Model.EndDate })@vehicleIdQueryStringBuilder.ToString()@vehiclePositionQSBuilder.ToString()" title="@Model.ChartName" alt="@Model.ChartName" /></li>
                    }
                }
  
                <li>
                    <h4>Vehicles</h4>
                    <ol class="legend">
                        @foreach (var vehicle in Mustache.Loop(m => m.AllVehicleModels))
                        {
                            var value = forMustache ? Html.Raw("{{VehicleId}}") : new MvcHtmlString(vehicle.VehicleId.ToString(CultureInfo.InvariantCulture));
                            var display = forMustache ? Html.Raw("{{Name}}") :  new MvcHtmlString(vehicle.Name);
                            var isChecked = !forMustache && Model.VehicleIds.Contains(vehicle.VehicleId) ? "checked" : "";
                            <li>
                                <input name="VehicleIds" type="checkbox" value="@value" @isChecked/><span>@display</span>
                            </li>
                        }
                    </ol>
                </li>
                <li class="range">
                    <h4>Date Range</h4>
                    <label for="StartDate">From</label>@Html.DropDownListFor(model => model.StartDate, SelectListFor.PriorMonthStartYear(d => new DateTime(DateTime.Now.Year, 1, 1) == d))
                    <label for="EndDate">To</label>@Html.DropDownListFor(model => model.EndDate, SelectListFor.PriorMonthEndYear(d => DateTime.Now == d))                    
                </li>
            </ul>

            <ol class="button-group">
                <li class="icon refresh">
                    <button id="ChartRefreshButton" type="submit"><span>Refresh</span></button>     
                </li>
            </ol>
        }
    
    </div>
}